<template>
    <div class="sortBox">
        <div class="item" :class='{"cur":tabIndex==1}' @click="getData(1)">综合</div>
        <div class="item" :class='{"cur":tabIndex==2}' @click="getData(2)">城市</div>
        <div class="item" :class='{"cur":tabIndex==3}' @click="getData(3)">
            流量
            <span>
                <i class="iconfont icon-jiantou_liebiaoshouqi_o"></i>
                <i class="iconfont icon-jiantou_liebiaozhankai_o"></i>
            </span>
        </div>
        <div class="item" :class='{"cur":tabIndex==4}' @click="getData(4)">
            广告位
            <span>
                <i class="iconfont icon-jiantou_liebiaoshouqi_o"></i>
                <i class="iconfont icon-jiantou_liebiaozhankai_o"></i>
            </span>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
export default {
    props:{

    },
    components:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            tabIndex:1
        })

        const getData = (flag)=>{
            state.tabIndex = flag
            context.emit('clickHandle',flag)
        }

        return{
            ...toRefs(state),
            getData
        }
    }
}
</script>

<style lang="scss" scoped>
    .sortBox{
        display: flex;
        height: 80px;
        color: #fff;
        .item{
            display: flex;
            justify-content: center; 
            align-items: center;
            flex: 1;
            font-size: 30px;
            font-weight: 500;
            position: relative;
            z-index: 10;
            padding: 0 4px 0 0;
            &::after{
                content: '';
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 10;
                height: 4px;
                width: 100%;
                background: #fff;

            }
            &+.item{
                margin: 0 0 0 4px;
            }
            &.cur{
                color: var(--baseColor);
                &::after{
                   background:var(--baseColor); 
                }
            }
            span{
               display: flex;
               flex-flow: column;
               align-items: center;
               justify-content: center;
               height: 60px;
               line-height: normal;
               padding: 0 0 0 1px;
               i{
                   display: block;
                   font-size: 30px;
                   margin: 8px 0 0 0;
                   font-weight: bold;
                   &+i{
                      margin: -18px 0 0 0;
                   }
               }
            }
        }
    }
</style>